<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="pageTitle">Product Details - Anti-Drone Store</title>
    <meta name="description" content="Professional anti-drone equipment details and specifications." id="pageDescription">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Common Styles -->
    <div th:replace="~{fragments/styles :: common-styles}"></div>
    <!-- Header Styles -->
    <div th:replace="~{fragments/header :: header-styles}"></div>
    
    <style>
        /* Breadcrumb */
        .breadcrumb-section {
            background: rgba(0, 0, 0, 0.02);
            padding: 20px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
        }
        
        .breadcrumb a {
            color: #64748b;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .breadcrumb a:hover {
            color: #1e3a8a;
        }
        
        .breadcrumb .current {
            color: #1e3a8a;
        }
        
        /* Product Hero */
        .product-hero {
            padding: 60px 0;
        }
        
        .product-gallery {
            position: relative;
        }
        
        .main-image {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e3a8a;
            font-size: 6rem;
            position: relative;
            overflow: hidden;
            cursor: zoom-in;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .main-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M 8 0 L 0 0 0 8" fill="none" stroke="rgba(30,58,138,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }
        
        .product-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: #1e3a8a;
            color: #fff;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .thumbnail-gallery {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .thumbnail {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
            border: 2px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e3a8a;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .thumbnail:hover,
        .thumbnail.active {
            border-color: #1e3a8a;
            transform: scale(1.05);
        }
        
        .product-info {
            padding-left: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 500px;
        }
        
        .product-category {
            color: #1e3a8a;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }
        
        .product-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
            line-height: 1.2;
        }
        
        .product-price {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 30px;
        }
        
        .product-description {
            color: #64748b;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 30px;
            flex-grow: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        
        .product-features {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .features-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #1e3a8a;
        }
        
        .features-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .features-list li {
            color: #64748b;
            display: flex;
            align-items: center;
            font-size: 1rem;
        }
        
        .features-list li::before {
            content: '✓';
            color: #1e3a8a;
            font-weight: bold;
            margin-right: 12px;
            font-size: 1.2rem;
        }
        
        .product-actions {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: auto;
            padding-top: 20px;
        }
        

        
        .product-meta {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .meta-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .meta-item:last-child {
            border-bottom: none;
        }
        
        .meta-label {
            color: #64748b;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }
        
        .meta-value {
            color: #1e3a8a;
            font-weight: 600;
        }
        
        /* Specifications */
        .specifications {
            background: #f8fafc;
            padding: 80px 0;
        }
        
        .specs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .spec-category {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .spec-category h4 {
            color: #1e3a8a;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .spec-list {
            list-style: none;
        }
        
        .spec-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .spec-item:last-child {
            border-bottom: none;
        }
        
        .spec-name {
            color: #64748b;
            font-weight: 500;
        }
        
        .spec-value {
            color: #333333;
            font-weight: 600;
        }

        /* 富文本内容样式 */
        .rich-content {
            color: #333333;
            line-height: 1.8;
            margin: 20px 0;
        }

        .rich-content h1,
        .rich-content h2,
        .rich-content h3,
        .rich-content h4,
        .rich-content h5,
        .rich-content h6 {
            color: #1e3a8a;
            margin: 20px 0 10px 0;
        }

        .rich-content h1 { font-size: 1.8rem; }
        .rich-content h2 { font-size: 1.6rem; }
        .rich-content h3 { font-size: 1.4rem; }
        .rich-content h4 { font-size: 1.2rem; }
        .rich-content h5 { font-size: 1.1rem; }
        .rich-content h6 { font-size: 1rem; }

        .rich-content p {
            margin: 15px 0;
            color: #333333;
        }

        .rich-content ul,
        .rich-content ol {
            margin: 15px 0;
            padding-left: 20px;
        }

        .rich-content li {
            margin: 8px 0;
            color: #333333;
        }

        .rich-content strong,
        .rich-content b {
            color: #1e3a8a;
            font-weight: 600;
        }

        .rich-content em,
        .rich-content i {
            color: #64748b;
            font-style: italic;
        }

        .rich-content a {
            color: #1e3a8a;
            text-decoration: none;
            border-bottom: 1px solid rgba(30, 58, 138, 0.3);
            transition: all 0.3s ease;
        }

        .rich-content a:hover {
            border-bottom-color: #1e3a8a;
        }

        .rich-content blockquote {
            border-left: 3px solid #1e3a8a;
            padding-left: 20px;
            margin: 20px 0;
            background: rgba(30, 58, 138, 0.05);
            padding: 15px 20px;
            border-radius: 0 8px 8px 0;
        }

        .rich-content code {
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            color: #1e3a8a;
        }

        .rich-content pre {
            background: rgba(0, 0, 0, 0.05);
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
        }

        .rich-content pre code {
            background: none;
            padding: 0;
        }

        .rich-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .rich-content th,
        .rich-content td {
            border: 1px solid rgba(0, 0, 0, 0.2);
            padding: 10px;
            text-align: left;
        }

        .rich-content th {
            background: rgba(30, 58, 138, 0.1);
            color: #1e3a8a;
            font-weight: 600;
        }

        .rich-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 20px 0;
        }

        /* 产品详细介绍区域 */
        .product-details-section {
            background: #ffffff;
            padding: 40px 0 80px 0;
        }

        .product-details-content {
            max-width: 1000px;
            margin: 0 auto;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .product-details-content .rich-content {
            font-size: 1rem;
            line-height: 1.8;
            color: #333333;
        }

        .product-details-content .rich-content h1,
        .product-details-content .rich-content h2 {
            border-bottom: 2px solid rgba(30, 58, 138, 0.3);
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: #1e3a8a;
        }

        .product-details-content .rich-content h3,
        .product-details-content .rich-content h4 {
            margin-top: 30px;
            margin-bottom: 15px;
            color: #1e3a8a;
        }

        /* 加载状态样式 */
        .loading-indicator {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(30, 58, 138, 0.3);
            border-top: 2px solid #1e3a8a;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            color: #ff4444;
            background: rgba(255, 68, 68, 0.1);
            border: 1px solid rgba(255, 68, 68, 0.3);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        /* Related Products */
        .related-products {
            padding: 80px 0;
        }
        
        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .related-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .related-card:hover {
            transform: translateY(-5px);
            border-color: rgba(30, 58, 138, 0.3);
            box-shadow: 0 20px 40px rgba(30, 58, 138, 0.1);
        }
        
        .related-image {
            height: 200px;
            background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e3a8a;
            font-size: 2.5rem;
        }
        
        .related-content {
            padding: 25px;
        }
        
        .related-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .related-price {
            color: #1e3a8a;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .btn-contact {
            background: transparent;
            border: 2px solid #1e3a8a;
            color: #1e3a8a;
            padding: 15px 30px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 5px;
            transition: all 0.3s;
            text-decoration: none;
            display: block;
            text-align: center;
            width: 100%;
        }

        .btn-contact:hover {
            background: #1e3a8a;
            color: #fff;
        }

        .btn-primary.btn-lg {
            width: 100%;
            text-align: center;
            padding: 18px 30px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .product-info {
                padding-left: 0;
                margin-top: 30px;
                min-height: auto;
            }

            .product-title {
                font-size: 2rem;
            }

            .product-price {
                font-size: 2rem;
            }

            .product-actions {
                flex-direction: column;
                gap: 15px;
                margin-top: 20px;
                padding-top: 15px;
            }

            .features-list {
                grid-template-columns: 1fr;
            }

            .specs-grid {
                grid-template-columns: 1fr;
            }

            .product-details-content {
                padding: 25px 20px;
                margin: 0 15px;
            }

            .product-details-section {
                padding: 30px 0 60px 0;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div th:replace="~{fragments/header :: header}"></div>

    <!-- Breadcrumb -->
    <section class="breadcrumb-section">
        <div class="container">
            <nav class="breadcrumb">
                <a href="/" th:href="@{/}">Home</a>
                <span>/</span>
                <a href="/products" th:href="@{/products}">Products</a>
                <span>/</span>
                <span class="current" id="breadcrumbProductName">Loading...</span>
            </nav>
        </div>
    </section>

    <!-- Product Hero -->
    <section class="product-hero">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="product-gallery">
                        <div class="main-image" id="mainImage">
                            <i class="fas fa-cube"></i>
                        </div>
                        <div class="thumbnail-gallery" id="thumbnailGallery">
                            <!-- 缩略图将动态加载 -->
                        </div>
                    </div>
                </div>
                
                <div class="col-6">
                    <div class="product-info">
                        <div class="product-category" id="productCategory">Loading...</div>
                        <h1 class="product-title" id="productTitle">Loading Product...</h1>
                        <div class="product-price" id="productPrice">Contact for Price</div>
                        <div class="product-description" id="productDescription">
                            <p>Loading product information...</p>
                        </div>
                        
                        <div class="product-actions">
                            <a href="/contact" th:href="@{/contact}" class="btn btn-primary btn-lg">REQUEST QUOTE</a>
                            <a href="/contact" th:href="@{/contact}" class="btn-contact">CONTACT SALES</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Details Section -->
    <section class="product-details-section" id="productDetailsSection" style="display: none;">
        <div class="container">
            <div class="product-details-content">
                <div class="rich-content" id="productRichContent">
                    <!-- 富文本内容将在这里动态加载 -->
                </div>
            </div>
        </div>
    </section>

    <!-- Specifications -->
<!--    <section class="specifications">-->
<!--        <div class="container">-->
<!--            <div class="section-title">-->
<!--                <h2>TECHNICAL <span class="highlight">SPECIFICATIONS</span></h2>-->
<!--                <p class="section-subtitle">Detailed technical specifications and performance characteristics</p>-->
<!--            </div>-->
<!--            -->
<!--            <div class="specs-grid">-->
<!--                <div class="spec-category">-->
<!--                    <h4>Detection Performance</h4>-->
<!--                    <ul class="spec-list">-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Detection Range</span>-->
<!--                            <span class="spec-value">5km</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Coverage Angle</span>-->
<!--                            <span class="spec-value">360°</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Minimum Target Size</span>-->
<!--                            <span class="spec-value">0.01 m²</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Detection Accuracy</span>-->
<!--                            <span class="spec-value">99.9%</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">False Alarm Rate</span>-->
<!--                            <span class="spec-value">&lt; 0.1%</span>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                -->
<!--                <div class="spec-category">-->
<!--                    <h4>Technical Specifications</h4>-->
<!--                    <ul class="spec-list">-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Frequency Band</span>-->
<!--                            <span class="spec-value">X-Band</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Power Consumption</span>-->
<!--                            <span class="spec-value">150W</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Operating Temperature</span>-->
<!--                            <span class="spec-value">-40°C to +70°C</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">IP Rating</span>-->
<!--                            <span class="spec-value">IP67</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Weight</span>-->
<!--                            <span class="spec-value">25kg</span>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                -->
<!--                <div class="spec-category">-->
<!--                    <h4>Connectivity & Interface</h4>-->
<!--                    <ul class="spec-list">-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Network Interface</span>-->
<!--                            <span class="spec-value">Ethernet, WiFi</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Data Output</span>-->
<!--                            <span class="spec-value">TCP/IP, UDP</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Control Interface</span>-->
<!--                            <span class="spec-value">Web GUI, API</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Integration</span>-->
<!--                            <span class="spec-value">ONVIF Compatible</span>-->
<!--                        </li>-->
<!--                        <li class="spec-item">-->
<!--                            <span class="spec-name">Alerts</span>-->
<!--                            <span class="spec-value">Email, SMS, SNMP</span>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

    <!-- Related Products -->
<!--    <section class="related-products">-->
<!--        <div class="container">-->
<!--            <div class="section-title">-->
<!--                <h2>RELATED <span class="highlight">PRODUCTS</span></h2>-->
<!--                <p class="section-subtitle">Complete your anti-drone system with these complementary products</p>-->
<!--            </div>-->
<!--            -->
<!--            <div class="related-grid">-->
<!--                <div class="related-card">-->
<!--                    <div class="related-image">-->
<!--                        <i class="fas fa-broadcast-tower"></i>-->
<!--                    </div>-->
<!--                    <div class="related-content">-->
<!--                        <h4 class="related-title">AD-2000 RF Jammer</h4>-->
<!--                        <div class="related-price">$15,999</div>-->
<!--                        <a href="/product/3" class="btn btn-primary btn-sm">VIEW DETAILS</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
<!--                <div class="related-card">-->
<!--                    <div class="related-image">-->
<!--                        <i class="fas fa-desktop"></i>-->
<!--                    </div>-->
<!--                    <div class="related-content">-->
<!--                        <h4 class="related-title">AD-Command Center</h4>-->
<!--                        <div class="related-price">$35,999</div>-->
<!--                        <a href="/product/5" class="btn btn-primary btn-sm">VIEW DETAILS</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
<!--                <div class="related-card">-->
<!--                    <div class="related-image">-->
<!--                        <i class="fas fa-satellite"></i>-->
<!--                    </div>-->
<!--                    <div class="related-content">-->
<!--                        <h4 class="related-title">AD-Antenna Kit</h4>-->
<!--                        <div class="related-price">$2,999</div>-->
<!--                        <a href="/product/7" class="btn btn-primary btn-sm">VIEW DETAILS</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

    <!-- Footer -->
    <div th:replace="~{fragments/footer :: footer}"></div>

    <!-- Header Scripts -->
    <div th:replace="~{fragments/header :: header-scripts}"></div>

    <!-- 产品ID隐藏字段 -->
    <input type="hidden" id="productId" th:value="${productId}" value="1">

    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            const productId = document.getElementById('productId').value;
            if (productId) {
                loadProductDetail(productId);
                setupLanguageChangeListener(productId);
            }
        });

        /**
         * 设置语言切换监听器
         */
        function setupLanguageChangeListener(productId) {
            let currentLanguageId = localStorage.getItem('selectedLanguage') || '1';

            // 定期检查语言是否发生变化
            setInterval(() => {
                const newLanguageId = localStorage.getItem('selectedLanguage') || '1';
                if (newLanguageId !== currentLanguageId) {
                    currentLanguageId = newLanguageId;
                    console.log('语言已切换到:', newLanguageId, '重新加载产品详情');
                    loadProductDetail(productId);
                }
            }, 500);

            // 监听storage事件（跨标签页语言切换）
            window.addEventListener('storage', function(e) {
                if (e.key === 'selectedLanguage' && e.newValue !== currentLanguageId) {
                    currentLanguageId = e.newValue || '1';
                    console.log('跨标签页语言切换:', currentLanguageId);
                    loadProductDetail(productId);
                }
            });
        }

        /**
         * 加载产品详情
         */
        function loadProductDetail(productId) {
            const languageId = localStorage.getItem('selectedLanguage') || '1';
            console.log('加载产品详情，ID:', productId, '语言ID:', languageId);

            // 显示加载状态
            showLoadingState();

            fetch(`/api/product/getById?id=${productId}&languageId=${languageId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('产品详情API响应:', data);
                    if (data.code === 200 && data.data) {
                        renderProductDetail(data.data);
                    } else {
                        throw new Error(data.message || '获取产品详情失败');
                    }
                })
                .catch(error => {
                    console.error('加载产品详情失败:', error);
                    showErrorState(error.message);
                });
        }

        /**
         * 渲染产品详情
         */
        function renderProductDetail(product) {
            console.log('渲染产品详情:', product);

            // 更新页面标题
            document.getElementById('pageTitle').textContent = `${product.productName || 'Product'} - Anti-Drone Store`;
            document.title = `${product.productName || 'Product'} - Anti-Drone Store`;

            // 更新面包屑
            document.getElementById('breadcrumbProductName').textContent = product.productName || 'Unknown Product';

            // 更新产品信息
            document.getElementById('productCategory').textContent = product.classifyName || 'Unknown Category';
            document.getElementById('productTitle').textContent = (product.productName || 'Unknown Product').toUpperCase();

            // 更新产品描述（使用productInfo）
            const descElement = document.getElementById('productDescription');
            if (product.productInfo) {
                descElement.innerHTML = `<p>${product.productInfo}</p>`;
            } else {
                descElement.innerHTML = '<p>No product information available.</p>';
            }

            // 处理富文本内容（productDesc）
            if (product.productDesc && product.productDesc.trim()) {
                const detailsSection = document.getElementById('productDetailsSection');
                const richContentElement = document.getElementById('productRichContent');

                // 显示富文本区域
                detailsSection.style.display = 'block';

                // 渲染富文本内容
                richContentElement.innerHTML = product.productDesc;

                console.log('富文本内容已加载');
            } else {
                // 如果没有富文本内容，隐藏该区域
                const detailsSection = document.getElementById('productDetailsSection');
                detailsSection.style.display = 'none';
                console.log('没有富文本内容，隐藏详细介绍区域');
            }

            // 更新产品图片
            updateProductImages(product);

            // 隐藏加载状态
            hideLoadingState();
        }



        /**
         * 更新产品图片
         */
        function updateProductImages(product) {
            const mainImage = document.getElementById('mainImage');
            const thumbnailGallery = document.getElementById('thumbnailGallery');

            // 获取图片列表
            let images = [];
            if (product.images && product.images.length > 0) {
                images = product.images.map(img => img.imagePath).filter(path => path);
            } else if (product.productImage) {
                images = [product.productImage];
            }

            if (images.length > 0) {
                // 显示第一张图片
                const firstImageUrl = `/api/file/get?filename=${images[0]}`;
                mainImage.innerHTML = `<img src="${firstImageUrl}" alt="${product.productName}"
                                             style="width: 100%; height: 100%; object-fit: cover;"
                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                       <div style="display: none; width: 100%; height: 100%; align-items: center; justify-content: center;">
                                           <i class="fas fa-cube" style="font-size: 4rem; color: #1e3a8a;"></i>
                                       </div>`;

                // 生成缩略图
                thumbnailGallery.innerHTML = '';
                images.forEach((imagePath, index) => {
                    const thumbnail = document.createElement('div');
                    thumbnail.className = `thumbnail ${index === 0 ? 'active' : ''}`;
                    thumbnail.innerHTML = `<img src="/api/file/get?filename=${imagePath}" alt="Thumbnail ${index + 1}"
                                                style="width: 100%; height: 100%; object-fit: cover;"
                                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                           <div style="display: none; width: 100%; height: 100%; align-items: center; justify-content: center;">
                                               <i class="fas fa-image" style="color: #1e3a8a;"></i>
                                           </div>`;

                    // 添加点击事件
                    thumbnail.addEventListener('click', function() {
                        // 更新主图
                        const imageUrl = `/api/file/get?filename=${imagePath}`;
                        mainImage.innerHTML = `<img src="${imageUrl}" alt="${product.productName}"
                                                     style="width: 100%; height: 100%; object-fit: cover;"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                               <div style="display: none; width: 100%; height: 100%; align-items: center; justify-content: center;">
                                                   <i class="fas fa-cube" style="font-size: 4rem; color: #1e3a8a;"></i>
                                               </div>`;

                        // 更新缩略图状态
                        thumbnailGallery.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
                        this.classList.add('active');
                    });

                    thumbnailGallery.appendChild(thumbnail);
                });
            } else {
                // 没有图片时显示默认图标
                mainImage.innerHTML = '<i class="fas fa-cube" style="font-size: 4rem; color: #1e3a8a;"></i>';
                thumbnailGallery.innerHTML = '';
            }
        }

        /**
         * 显示加载状态
         */
        function showLoadingState() {
            document.getElementById('productCategory').innerHTML = '<span class="loading-indicator"></span>Loading...';
            document.getElementById('productTitle').innerHTML = '<span class="loading-indicator"></span>Loading Product...';
            document.getElementById('productDescription').innerHTML = '<p><span class="loading-indicator"></span>Loading product information...</p>';
            document.getElementById('breadcrumbProductName').innerHTML = '<span class="loading-indicator"></span>Loading...';
        }

        /**
         * 隐藏加载状态
         */
        function hideLoadingState() {
            // 加载完成后的状态已在renderProductDetail中处理
        }

        /**
         * 显示错误状态
         */
        function showErrorState(message) {
            document.getElementById('productCategory').innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
            document.getElementById('productTitle').textContent = 'Failed to Load Product';
            document.getElementById('productDescription').innerHTML = `
                <div class="error-message">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Error:</strong> ${message}
                    <br><br>
                    <button onclick="location.reload()" class="btn btn-primary btn-sm">
                        <i class="fas fa-redo"></i> Retry
                    </button>
                </div>
            `;
            document.getElementById('breadcrumbProductName').textContent = 'Error';
        }

        // Thumbnail gallery (保留原有的缩略图功能作为备用)
        document.addEventListener('DOMContentLoaded', function() {
            const thumbnails = document.querySelectorAll('.thumbnail');
            const mainImage = document.getElementById('mainImage');
            
            thumbnails.forEach((thumbnail, index) => {
                thumbnail.addEventListener('click', function() {
                    // Remove active class from all thumbnails
                    thumbnails.forEach(t => t.classList.remove('active'));
                    // Add active class to clicked thumbnail
                    this.classList.add('active');
                    
                    // Change main image icon based on thumbnail
                    const icons = ['fa-radar', 'fa-cog', 'fa-chart-line', 'fa-shield-alt'];
                    const iconElement = mainImage.querySelector('i');
                    iconElement.className = `fas ${icons[index]}`;
                });
            });
            
            // Image zoom effect
            mainImage.addEventListener('click', function() {
                if (this.style.transform === 'scale(1.5)') {
                    this.style.transform = 'scale(1)';
                    this.style.cursor = 'zoom-in';
                } else {
                    this.style.transform = 'scale(1.5)';
                    this.style.cursor = 'zoom-out';
                }
            });
            
            mainImage.style.transition = 'transform 0.3s ease';
        });
        
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        // Initialize animations
        document.addEventListener('DOMContentLoaded', function() {
            const animatedElements = document.querySelectorAll('.spec-category, .related-card');
            animatedElements.forEach((element, index) => {
                element.classList.add('fade-in');
                element.style.transitionDelay = `${index * 0.1}s`;
                observer.observe(element);
            });
        });
    </script>
</body>
</html>
